<template>
	<div class="wrapper">
		<view class="flex benben-position-layout flex flex-wrap align-center newsList_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub newsList_fd0_0'>
				<view class='flex flex-wrap align-center newsList_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  newsList_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='newsList_fd0_0_c1_c0'>选择城市</text>
				</view>
				<view class='flex flex-wrap align-center justify-end newsList_fd0_0_c0'>
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!-- <view class="headerL" @tap.stop="backData">
			<text>定位城市</text>
			<image mode="" style="width:32rpx;height: 32rpx;"></image>
		</view> -->
		<view style="width: 100%;padding: 0 32rpx;margin-top: 32rpx;">
			<view class='flex flex-wrap align-center' style="width: 100%;height: 60rpx;background-color: #f6f7f9;padding: 0 32rpx;border-radius: 30rpx;">
				<image class='home_fd0_0_c1_c0' style="width: 24rpx;height: 24rpx;margin-right: 16rpx;"
					mode="aspectFit" :src='STATIC_URL+"16.png"'></image>
				<input class="input_style" type="text" :placeholder="`请输入城市名称`" confirm-type="done"
					:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:24rpx" />
			</view>
		</view>
		<scroll-view class="calendar-list" scroll-y="true" :scroll-into-view="scrollIntoId">
			<view v-if="disdingwei" id="hot">
				<!-- 定位模块 -->
				<view class="dingwei">
					<view>当前位置</view>
					<view class="dingweiBox" style="margin-top: 20rpx;">
						<view class="dingwei_cityLeft" @click="backData">
							<text style="font-size: 24rpx;color: #333;">{{position}}</text>
						</view>
					</view>
				</view>
			</view>


			<!-- 城市列表 -->
			<view v-if="searchValue == ''" v-for="(item, index) in list" :id="getId(index)" :key="index">
				<view class="letter-header">{{ getId(index) }}</view>
				<view class="city-div" v-for="(city, i) in item" :key="i" @click="back_city(city)">
					<text class="city">{{ city.cityName }}</text>
				</view>
			</view>
			<!-- 搜索结果 -->
			<view class="city-div" v-for="(item, index) in searchList" :key='index' @click="back_city(item)">
				<text class="city">{{ item.cityName }}</text>
			</view>
		</scroll-view>

		<!-- 右侧字母 -->
		<view class="letters" v-if="searchValue == ''">
			<!-- <view class="letters-item" @click="scrollTo('hot')">最近</view> -->
			<view class="letters-item" v-for="item in letter" :key="item" @click="scrollTo(item)">{{ item }}</view>
		</view>

		<!-- 选中之后字母 -->
		<view class="mask" v-if="showMask">
			<view class="mask-r">{{selectLetter}}</view>
		</view>
	</div>
</template>

<script>
	import Citys from '@/components/city.js';
	// import amap from '@/amap-wx.js';/
	export default {
		components: {},
		props: {},

		computed: {
			hotCity() {
				return Citys.hotCity;
			},

			citys() {
				return Citys.cities;
			}
		},

		data() {
			return {
				statusBarHeight: 45,
				ImgUrl: this.ImgUrl,
				letter: [],
				selectLetter: '',
				searchValue: '',
				scrollIntoId: '',
				list: [],
				tId: null,
				searchList: [],
				showMask: false,
				disdingwei: true,
				Visit: [], //最近访问
				newList: [

					{
						cityName: '北京'
					},
					{
						cityName: '上海'
					},
					{
						cityName: '南京'
					},
					{
						cityName: '深圳'
					},

				],
				position: '北京',
				longitude: '', //经度
				latitude: '', //纬度
				seconds: 3,
				po_tips: '当前城市',
			}
		},

		created() {
			//获取存储的最近访问
			var that = this
			uni.getStorage({
				key: 'Visit_key',
				success: function(res) {
					that.Visit = res.data
				}
			});
			//获取定位 经度纬度
			that.getWarpweft()
			//获取city.js 的程序字母
			var mu = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'w', 'x',
				'y',
				'z'
			];
			var tmp = [];
			for (var i = 0; i < mu.length; i++) {
				var item = mu[i];
				for (var j = 0; j < this.citys.length; j++) {
					var py = this.citys[j].py;
					if (py.substring(0, 1) == item) {
						if (tmp.indexOf(item) == -1) {
							this.list[i] = [this.citys[j]];
							tmp.push(item);
							this.letter.push(item.toUpperCase());
						} else {
							this.list[i].push(this.citys[j]);
						}
					}
				}
			}
		},
		methods: {
			toHome() {
				uni.navigateBack({
					delta: 1
				})
			},
			delet() {
				this.Visit = []
			},
			backData() {
				// uni.$emit('back_city', this.position);
				let lat = {
					position: this.position,
					longitude: this.longitude,
					latitude: this.latitude,
				}
				uni.$emit('back_lat', lat);
				uni.navigateBack()
			},
			getId(index) {
				return this.letter[index];
			},

			scrollTo(letter) {
				this.showMask = true
				this.selectLetter = letter == 'hot' ? '最' : letter
				setTimeout(() => {
					this.showMask = false
				}, 300);
				this.scrollIntoId = letter;
			},


			query(source, text) {
				let res = [];
				var self = this;
				res = source.filter(item => {
					const arr = [];
					let isHave = false;
					Object.keys(item).forEach(prop => {
						const itemStr = item[prop];
						self.isString(itemStr) &&
							itemStr.split(',').forEach(val => {
								arr.push(val);
							});
					});
					arr.some(val => {
						isHave = new RegExp('^' + text).test(val);
						return isHave;
					});
					return isHave;
				});
				console.log(JSON.stringify(res));
				return res;
			},

			isString(obj) {
				return typeof obj === 'string';
			},

			onInput(e) {
				const value = e.target.value;
				console.log(value);
				if (value !== '' && this.citys && this.citys.length > 0) {
					const queryData = this.query(this.citys, String(value).trim());
					this.searchList = queryData;
					this.disdingwei = false
				} else {
					this.searchList = [];
					this.disdingwei = true
				}
			},

			back_city(item) {
				if (item) {
					uni.$emit('back_city', item.cityName);
					//unshift 把数据插入到首位，与push相反
					this.Visit.unshift(item)
					this.searchValue = "";
					this.disdingwei = true
					uni.navigateBack()
					var arr = this.Visit
					//数组去重
					function distinct(arr) {
						let newArr = []
						for (let i = 0; i < arr.length; i++) {
							if (newArr.indexOf(arr[i]) < 0) {
								newArr.push(arr[i])
							}
						}
						return newArr
					}
					this.Visit = distinct(arr)
					console.log(this.Visit, "---最近访问")
					uni.setStorage({
						key: 'Visit_key',
						data: this.Visit
					});
				} else {
					this.$emit('back_city', 'no');
				}

			},
			getWarpweft() {
				console.log('获取定位11')
				var that = this;
				that.po_tips = '定位中...'
				let countdown = setInterval(() => {
					that.seconds--;
					uni.getLocation({
						type: 'gcj02',
						geocode: true,
						success: function(res) {
							console.log("定位===", res)
							that.longitude = res.longitude
							that.latitude = res.latitude
							// #ifdef H5
							that.getAdders(res.latitude, res.longitude)
							// #endif
							// #ifdef APP-PLUS
							that.position = res.address.city
							// #endif
						}
					});
					if (that.seconds <= 0) {
						that.seconds = 3
						that.po_tips = '当前城市'
						clearInterval(countdown);
					}
				}, 1000);
			},

			getAdders(lat, lng) {
				let that = this;
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					method: 'GET',
					data: {
						location: lng + ',' + lat,
						key: 'bce0b97e644325646c85ad8edfb9025b	', //  切记一定是web服务的，其他的不行
					},
					success: function(res) {
						console.log(res, "-------------------> 城市解析");
						console.log(res.data.regeocode.addressComponent.city);
						that.position = res.data.regeocode.addressComponent.city;
					},
					fail: function(err) {
						console.log('地址解析失败' + err);
					}
				})
			},
		}
	};
</script>

<style scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.newsList_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}
	
	.home_fd0_0_c1_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.input_style{
		width: calc(100% - 50rpx);
	}

	.newsList_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.newsList_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.newsList_fd0_0_c0 {
		width: 120rpx;
	}

	.newsList_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.wrapper {
		position: fixed;
		z-index: 999999;
		background: #ffffff;
		height: 100%;
		width: 100%;
		top: 0px;
		left: 0px;
	}

	.mask {
		position: absolute;
		bottom: 0upx;
		top: 83upx;
		left: 0upx;
		right: 0upx;
		width: 750upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0);
	}

	.mask-r {
		height: 120upx;
		width: 120upx;
		border-radius: 60upx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		font-size: 40upx;
		color: #FFFFFF
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}


	.headerL {
		padding: 24rpx 32rpx;
		font-size: 32rpx;

		text {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

	.headerR {
		/* width: 60rpx; */
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding-left: 20rpx;
	}


	.back_div {
		width: 65upx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back_img {
		width: 35upx;
		height: 35upx;
	}

	.input {
		font-size: 28upx;
		width: 620upx;
		height: 55upx;
		border-radius: 40upx;
		background-color: #F5F5F5;
		padding-left: 20upx;
		padding-right: 20upx;
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
	}

	.title {
		font-size: 30upx;
		color: white;
	}

	.show {
		left: 0;
		width: 100%;
		transition: left 0.3s ease;
	}

	.hide {
		left: 100%;
		width: 100%;
		transition: left 0.3s ease;
	}


	.title {
		font-size: 30upx;
		color: white;
	}

	.calendar-list {
		position: absolute;
		top: 280upx;
		bottom: 0upx;
		width: 100%;
		background-color: #FFFFFF;
	}

	.letters {
		position: absolute;
		right: 30upx;
		bottom: 0px;
		width: 50upx;
		top: 30%;

		text-align: center;
		font-size: 24upx;
	}

	.letters-item {
		margin-bottom: 5upx;
	}

	.letter-header {
		height: 45upx;
		line-height: 45upx;
		font-size: 22upx;
		color: #333333;
		padding-left: 24upx;
		box-sizing: border-box;
		display: flex;
		/* align-items: center; */
		background-color: #ebedef;

	}

	.city-div {
		width: 660upx;
		height: 85upx;
		/* margin-left: 24upx; */
		border-bottom-width: 0.5upx;
		border-bottom-color: #ebedef;
		border-bottom-style: solid;
		display: flex;
		/* align-items: center; */
		margin-right: 35upx;
	}

	.city {
		font-size: 24upx;
		color: #333;
		padding-left: 30upx;
		padding-top: 20rpx;
	}

	.dingwei {
		width: 100%;
		padding: 0 32rpx 40rpx 32rpx;
		box-sizing: border-box;
	}

	.dingwei_Tips {
		margin-left: 24upx;
		margin-bottom: 24upx;
		font-size: 28upx;
		color: #A5A5A5;
	}

	.dingwei_city {
		width: 100%;
		/* height: 60upx; */
		padding-left: 55upx;
		padding-right: 70upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}

	.dingwei_city_one {
		/* width: 132upx; */
		height: 64rpx;
		padding: 0 32rpx;
		background-color: #F6F7F9;
		border-radius: 32rpx;
		font-size: 26upx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.dingweis_div {
		display: flex;
		align-items: center;
		flex-direction: row;
		align-items: center;
		margin-left: 32rpx;
		/* color: #2f9bfe; */
	}

	.dingweis {
		width: 32upx;
		height: 32upx;
	}

	.dingwei_city_zuijin {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.toright {
		margin-right: 25upx;
	}

	.dingweiBox {
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.dingwei_cityLeft {
		background: rgba(245, 245, 245, 1);
		padding: 8rpx 24rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;

	}

	.dingwei_cityLeft text:first-child {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #BFBFBF;
		line-height: 40rpx;
	}

	.dingwei_cityLeft text:last-child {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 10rpx;
		color: #8845F6;
		line-height: 40rpx;
	}

	.confirmOrder_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.confirmOrder_fd0_0_c0 {
		width: 200rpx;
	}

	.confirmOrder_fd0_0_c0_c0 {
		width: 32rpx;
		height: 32rpx;
	}

	.confirmOrder_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.confirmOrder_fd0_0_c2 {
		padding: 0rpx 0rpx 0rpx 0rpx;
		width: 200rpx;
	}

	.confirmOrder_flex_0 {
		background: #fff;
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.technician_fd0_0_c0 {
		width: 100rpx;
	}

	.technician_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
		font-weight: 700;
	}
</style>